<!DOCTYPE html>
<!--[if IE 9]>         <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">

    <title>数字币对冲平台|BDS虚拟币对冲平台</title>
 		<#include "../static/top.ftl" >

</head>
<body>
<!-- Page Wrapper -->
<!-- In the PHP version you can set the following options from inc/config file -->
<!--
    Available classes:

    'page-loading'      enables page preloader
-->
<div id="page-wrapper" class="page-loading">
    <!-- Preloader -->
    <!-- Preloader functionality (initialized in js/app.js) - pageLoading() -->
    <!-- Used only if page preloader enabled from inc/config (PHP version) or the class 'page-loading' is added in #page-wrapper element (HTML version) -->
    <div class="preloader">
        <div class="inner">
            <!-- Animation spinner for all modern browsers -->
            <div class="preloader-spinner themed-background hidden-lt-ie10"></div>

            <!-- Text for IE9 -->
            <h3 class="text-primary visible-lt-ie10"><strong>Loading..</strong></h3>
        </div>
    </div>

    <div id="page-container" class="header-fixed-top sidebar-visible-lg-full sidebar-light">
        <!-- Alternative Sidebar -->

        <!-- END Alternative Sidebar -->

        <!-- Main Sidebar -->



                <#include "../static/menu.ftl" >


        <!-- END Main Sidebar -->

        <!-- Main Container -->
        <div id="main-container">
            <!-- Header -->



           <#include "../static/header.ftl" >
            <!-- END Header -->

            <!-- Page content -->
            <div id="page-content">
                <!-- Validation Header -->
                <div class="content-header">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="header-section">
                                <h1>交易</h1>
                            </div>
                        </div>
                        <div class="col-sm-6 hidden-xs">
                            <div class="header-section">
                                <ul class="breadcrumb breadcrumb-top">
                                    <li>User Interface</li>
                                    <li>Forms</li>
                                    <li><a href="">Validation</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END Validation Header -->


                <div class="row">
                  <div class="block">
	                  <form class="form-horizontal form-bordered">
	                       <div class="form-group">
	                       	 <div class="col-md-6">
	                       	    <label class="col-md-3 control-label" for="val-skill">交易所</label>
		                        <div class="col-md-6">
		                           <select id="select_exchange" name="api_exchange" class="form-control">
		                            </select>
		                        </div>
	                       	 </div>
	                       	 <div class="col-md-6">

	                       	    <label class="col-md-3 control-label" for="val-skill">币对</label>
		                        <div class="col-md-6">
		                            <select id="select_pair" name="api_exchange" class="form-control">
		                            </select>
		                        </div>
	                       	 </div>


	                       </div>


	                   </form>

                </div>


                <!--买入/卖出选择框 -->
                 <div class="row">

                    <div class="col-sm-12  col-md-8">
                        <!-- Form Validation Block -->
                        <div class="block">
                            <div class="block-title">
                                <h2>现货交易</h2>
                            </div>
                            <div class="row">



                        	<div class="col-md-6">
	                            <form id="form-set-api" method="post" class="form-horizontal form-bordered">


	                                <div class="form-group">
	                                    <label class="col-md-3 control-label" for="access-key">买入价</label>
	                                    <div class="col-md-6">
	                                        <input type="number" id="buy_price" name="access-key" class="form-control buy_input" placeholder="">
	                                    </div>
                                        <label class="col-md-1 control-label quote_symbol"></label>
                                    </div>

                                    <div class="form-group">

                                        <div class="col-md-12">
                                            <label class="radio-inline" for="sell_radio1">
                                                <input type="radio" id="sell_radio1" name="sell_radios" value="sell1"> 卖一
                                            </label>
                                            <label class="radio-inline" for="sell_radio2">
                                                <input type="radio" id="sell_radio2" name="sell_radios" value="sell2"> 卖二
                                            </label>
                                            <label class="radio-inline" for="sell_radio3">
                                                <input type="radio" id="sell_radio3" name="sell_radios" value="sell3"> 卖三
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group">
	                                    <label class="col-md-3 control-label" for="secret-key">买入量</label>
	                                    <div class="col-md-6">
	                                        <input type="number" id="buy_amount" name="secret-key" class="form-control buy_input" placeholder="">
	                                    </div>
                                        <label class="col-md-1 control-label base_symbol"></label>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-md-3 control-label">交易额</label>
                                        <label class="col-md-3 control-label" id="buy_total">00.00</label>
                                        <label class="col-md-1 control-label quote_symbol">USDT</label>
                                    </div>
	                                <div class="form-group form-actions">
	                                    <div class="col-md-8 col-md-offset-3">
	                                        <button id="submit_buy" type="button" class="btn btn-effect-ripple btn-primary">确定</button>
	                                        <button type="reset" class="btn btn-effect-ripple btn-danger">取消</button>
	                                    </div>
	                                </div>
	                            </form>

                            </div>
                            <div class="col-md-6">
	                            <form id="form-set-api" method="post" class="form-horizontal form-bordered">
	                                <div class="form-group">
	                                    <label class="col-md-3 control-label" for="access-key">卖出价</label>
	                                    <div class="col-md-6">
	                                        <input type="number" id="sell_price" name="access-key" class="form-control sell_input"
	                                               placeholder="">
	                                    </div>
                                        <label class="col-md-1 control-label quote_symbol"></label>
                                    </div>

                                    <div class="form-group">

                                        <div class="col-md-12">
                                            <label class="radio-inline" for="buy_radio1">
                                                <input type="radio" id="buy_radio1" name="buy_radios" value="buy1"> 买一
                                            </label>
                                            <label class="radio-inline" for="buy_radio2">
                                                <input type="radio" id="buy_radio2" name="buy_radios" value="buy2"> 买二
                                            </label>
                                            <label class="radio-inline" for="buy_radio3">
                                                <input type="radio" id="buy_radio3" name="buy_radios" value="buy3"> 买三
                                            </label>
                                        </div>
                                    </div>

	                                <div class="form-group">
	                                    <label class="col-md-3 control-label" for="secret-key">卖出量</label>
	                                    <div class="col-md-6">
	                                        <input type="number" id="sell_amount" name="secret-key" class="form-control sell_input"
	                                               placeholder="">
	                                    </div>
                                        <label class="col-md-1 control-label base_symbol"></label>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">交易额</label>
                                        <label class="col-md-3 control-label" id="sell_total">00.00</label>
                                        <label class="col-md-1 control-label quote_symbol">USDT</label>
                                    </div>
	                                <div class="form-group form-actions">
	                                    <div class="col-md-8 col-md-offset-3">
	                                        <button id="submit_sell" type="button" class="btn btn-effect-ripple btn-primary">确定
	                                        </button>
	                                        <button type="reset" class="btn btn-effect-ripple btn-danger">取消</button>
	                                    </div>
	                                </div>
	                            </form>
                           </div>
                            </div>
                        </div>
                        <!-- END Form Validation Block -->
                    </div>
 					<div class="col-sm-12  col-md-4">
 					  <div class="block">
                            <div class="block-title">
                                <h2>最新卖出价格</h2>
                            </div>
 						<div class="table-responsive">
						<table class="table table-striped table-borderless table-vcenter" style="margin-top: -15px;">
                                <thead>
                                    <tr >
                                        <th>档位</th>
                                        <th>价格</th>
                                        <th>数量</th>
                                        <th>总计</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    <tr >
                                        <td style="color:#008069">卖一</td>
                                        <td>0.566</td>
                                        <td>3</td>
                                        <td >1.5</td>
                                    </tr>
                                    <tr >
                                        <td  style="color:#008069">卖二</td>
                                        <td>0.566</td>
                                        <td>3</td>
                                        <td >1.5</td>
                                    </tr>
                                    <tr>
                                        <td  style="color:#008069">卖三</td>
                                        <td>0.566</td>
                                        <td>3</td>
                                        <td >1.5</td>
                                    </tr>

                                </tbody>
                            </table>
                            </div>

 					</div>

                    </div>

                </div>


 				<div class="row">

                    <div class="col-sm-12  col-md-6">
                        <!-- Form Validation Block -->
                        <div class="block">
                            <div class="block-title">
                                <h2>最新卖出价格</h2>
                            </div>
                        	<div class="table-responsive">
                                <table class="table table-striped table-borderless table-vcenter">
                                    <thead>
                                        <tr>
                                            <th>档位</th>
                                            <th>价格</th>
                                            <th>数量</th>
                                        </tr>
                                    </thead>
                                    <tbody id="ask-depth">

                                        <tr>
                                            <td style="color:#008069">卖一</td>
                                            <td id="sell1">0.564</td>
                                            <td>3</td>
                                        </tr>
                                        <tr >
                                            <td  style="color:#008069">卖二</td>
                                            <td id="sell2">0.565</td>
                                            <td>3</td>
                                        </tr>
                                        <tr>
                                            <td  style="color:#008069">卖三</td>
                                            <td id="sell3">0.566</td>
                                            <td>3</td>
                                        </tr>

                                    </tbody>
                                </table>
                            </div>


                        </div>
                </div>

             <div class="col-sm-12  col-md-6">
                        <!-- Form Validation Block -->
                        <div class="block">
                            <div class="block-title">
                                <h2>最新买入价格</h2>
                            </div>
                        <div class="table-responsive">
                                        <table class="table table-striped table-borderless table-vcenter">
                                            <thead>
                                                <tr>
                                                    <th>档位</th>
                                                    <th>价格</th>
                                                    <th>数量</th>
                                                </tr>
                                            </thead>
                                            <tbody id="bid-depth">

                                                <tr>
                                                    <td style="color:#d45858">买一</td>
                                                    <td id="buy1">0.566</td>
                                                    <td>3</td>
                                                </tr>
                                                <tr >
                                                    <td  style="color:#d45858">买二</td>
                                                    <td id="buy2">0.565</td>
                                                    <td>3</td>
                                                </tr>
                                                <tr>
                                                    <td  style="color:#d45858">买三</td>
                                                    <td id="buy3">0.564</td>
                                                    <td>3</td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </div>


                        </div>
                </div>



            </div>
            <!-- END Page Container -->
        </div>
        <!-- END Page Wrapper -->


        <script>

            $(function () {
                initExchange();
            });


            function initExchange(){
                $.get("/exchange/list",function (data) {
                    var list=data.data;
                    var html="";
                    for (var i = 0; i <list.length; i++) {
                        html+="<option value="+list[i]+">"+list[i]+"</option>"
                    }
                    $("#select_exchange").append(html);

                    var exchange=$("#select_exchange").val();
                    initPairs(exchange);
                });
            };


            $("#select_exchange").change(function () {
                var exchange=$("#select_exchange").val();
                initPairs(exchange);
            });


            function initPairs(exchange){
                $.get("/exchange/pairs", {exchange:exchange}, function (data) {
                    $("#select_pair").empty();
                    var list=data.data;
                    var html="";
                    for (var i = 0; i <list.length; i++) {
                        html+="<option value="+list[i]+">"+list[i]+"</option>"
                    }
                    $("#select_pair").append(html);
                });
            };


            var temp_exchange="";

            $("#select_pair").change(function () {
                changePair();
            });

            function changePair() {
                var exchange=$("#select_exchange").val();
                var pair=$("#select_pair").val().toUpperCase();
                var array=pair.split("_");
                var base=array[0];
                var quote=array[1];
                $(".base_symbol").text(base);
                $(".quote_symbol").text(quote);
                connectWs(exchange);
            }

            var socketjs_url="http://${wsurl}";

            var stompClient = null;

            function connectWs(exchange) {
                if(temp_exchange!=""&&exchange==temp_exchange){
                    return;
                }else{
                    disconnect();
                    var socket = new SockJS(socketjs_url);
                    stompClient = Stomp.over(socket);
                    stompClient.connect({}, function (frame) {
                        console.log('Connected: ' + frame);
                        stompClient.subscribe("/topic/"+exchange.toLowerCase()+"/marketDepth", function (data) {
                            showMarketDepth(JSON.parse(data.body));
                        });
                    });
                    temp_exchange=exchange;
                }
            }

            function disconnect() {
                if (stompClient !== null) {
                    stompClient.disconnect();
                }
                console.log("Disconnected");
            }

            function showMarketDepth(data){
                var depth=data.data;
                var pair=depth.pair;
                var pair_now=$("#select_pair").val();
                if(pair==pair_now){
                    var bids=depth.bids;
                    var asks=depth.asks;
                    showBids(bids);
                    showAsks(asks);
                }
            }

            function showBids(bids){
                var html="";
                for (var i = 0; i < 5; i++) {
                    var level=i+1;
                    var price_id="buy"+level;
                    html += "<tr>\n" +
                            "<td style=\"color:#d45858\">买"+level+"</td>\n" +
                            "<td id="+price_id+">"+bids[i].price+"</td>\n" +
                            "<td>"+bids[i].amount+"</td>\n" +
                            "</tr>";
                }
                $("#bid-depth").empty();
                $("#bid-depth").append(html);
            }

            function showAsks(asks){
                var html="";
                for (var i = 0; i < 5; i++) {
                    var level=i+1;
                    var price_id="sell"+level;
                    html += "<tr>\n" +
                            "<td style=\"color:#d45858\">卖"+level+"</td>\n" +
                            "<td id="+price_id+">"+asks[i].price+"</td>\n" +
                            "<td>"+asks[i].amount+"</td>\n" +
                            "</tr>";
                }
                $("#ask-depth").empty();
                $("#ask-depth").append(html);
            }


            $(".buy_input").change(function () {
                change_buy_total();
            });

            function change_buy_total() {
                var buy_price=$(".buy_input")[0].value;
                var buy_amount=$(".buy_input")[1].value;
                $("#buy_total").text(accMul(buy_price,buy_amount));
            }

            $(".sell_input").change(function () {
                change_sell_total();
            });

            function change_sell_total() {
                var buy_price=$(".sell_input")[0].value;
                var buy_amount=$(".sell_input")[1].value;
                $("#sell_total").text(accMul(buy_price,buy_amount));
            }

            $("input[name='buy_radios']").change(function () {
                var buy=$("input[name='buy_radios']:checked").val();
                var price=$("#"+buy+"").text();
                $(".sell_input")[0].value=price;
                change_sell_total();
            });

            $("input[name='sell_radios']").change(function () {
                var sell=$("input[name='sell_radios']:checked").val();
                var price=$("#"+sell+"").text();
                $(".buy_input")[0].value=price;
                change_buy_total();
            });

            $("#submit_buy").click(function () {
                        var price=$("#buy_price").val();
                        var num=$("#buy_amount").val();
                        var exchange=$("#select_exchange").val();
                        var symbol=$("#select_pair").val();

                        if(price==""||num==""||exchange==""||symbol=="") {
                            alert("请填写完整信息！")
                        }else{
                            var params={
                                price:price,
                                num:num,
                                exchange:exchange,
                                symbol:symbol,
                                type:"buy"
                            };
                            $.post("/spot/order",params,function(data){
                                alert(data.msg);
                            });
                        }
                    }
            );

            $("#submit_sell").click(function () {
                        var price=$("#sell_price").val();
                        var num=$("#sell_amount").val();
                        var exchange=$("#select_exchange").val();
                        var symbol=$("#select_pair").val();

                        if(price==""||num==""||exchange==""||symbol=="") {
                            alert("请填写完整信息！")
                        }else{
                            var params={
                                price:price,
                                num:num,
                                exchange:exchange,
                                symbol:symbol,
                                type:"sell"
                            };
                            $.post("/spot/order",params,function(data){
                                alert(data.msg);
                            });
                        }
                    }
            );

            function accMul(arg1,arg2){
                var m=0,s1=arg1.toString(),
                        s2=arg2.toString();
                try{
                    m+=s1.split(".")[1].length}catch(e){}
                try{
                    m+=s2.split(".")[1].length}catch(e){}
                return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m
                )}

        </script>
</body>
</html>